<template>
  <el-dialog class="mask" :visible.sync="showMask" width="30%" fullscreen>
    <div class="mask" @click.self.stop="showMask = false">
      <!-- 公司 -->
      <div class="mask-box" v-show="type == 'invite6'">
        <div class="mask-close el-icon-close" @click="close"></div>
        <div class="mask-content">
          屏蔽后不会对你推荐该公司职位，你发布的信息也不会对该公司展示
        </div>
        <div class="mask-btn-wrap">
          <div class="mask-btn mask-btn-top" @click.stop="close">取消</div>
          <div class="mask-btn mask-btn-bottom" @click.stop="getShield2()">
            确定
          </div>
        </div>
      </div>

      <!-- 监理方面 -->
      <div class="mask-box3" v-show="type == 'yulan'">
        <div class="mask-close el-icon-close" @click="close"></div>
        <!-- <div class="mask-title3">
            模版预览
          </div> -->
        <div class="mask-content3" style="height: auto">
          <img
            :src="item"
            v-for="(item, index) in imgList"
            :key="'s' + index"
            alt=""
            class="mask-img2"
          />
        </div>
        <!-- <div class="mask-btn-wrap3">
            <div class="mask-btn3 mask-btn-left">使用模板投递</div>
            <div class="mask-btn3 mask-btn-right">保存到本地</div>
          </div> -->
      </div>

      <!-- 展示未读的认证请求 -->
      <div class="mask-box" v-show="type == 'unRead'">
        <!-- <div class="mask-close el-icon-close" @click="close"></div> -->
        <!-- <div class="mask-content" style="text-align: center; margin-bottom: 12px">
            提示
          </div> -->
        <div
          class="mask-content-main"
          style="text-align: center; white-space: nowrap; margin: 40px auto"
        >
          {{ "申请已提交，请您耐心等待平台回访" }}
        </div>
        <div
          class="mask-btn-wrap"
          style="display: flex; justify-content: space-between"
        >
          <div
            class="mask-btn mask-btn-top"
            @click.stop="close(), $emit('dealWith', false, data)"
            style="width: 142px"
          >
            拒绝
          </div>
          <div
            class="mask-btn mask-btn-bottom"
            @click.stop="close(), $emit('dealWith', true, data)"
            style="width: 142px; background-color: #64b6a8; color: #fff"
          >
            同意
          </div>
        </div>
      </div>

      <div class="mask-box" v-show="type == 'cmembership1'">
        <div
          class="mask-content-main"
          style="text-align: center; white-space: nowrap; margin: 40px auto"
        >
          {{ "礼品送货通知" }}
        </div>
        <div
          class="mask-btn-wrap"
          style="display: flex; justify-content: center"
        >
          <div
            class="mask-btn mask-btn-top"
            @click.stop="operate()"
            style="width: 142px; background-color: #64b6a8; color: #fff"
          >
            查看详情
          </div>
        </div>
      </div>
      <div class="mask-box" v-show="type == 'cmembership2'">
        <div
          class="mask-content-main"
          style="text-align: center; white-space: nowrap; margin: 40px auto"
        >
          {{ "礼品退货通知" }}
        </div>
        <div
          class="mask-btn-wrap"
          style="display: flex; justify-content: center"
        >
          <div
            class="mask-btn mask-btn-top"
            @click.stop="operate()"
            style="width: 142px; background-color: #64b6a8; color: #fff"
          >
            查看详情
          </div>
        </div>
      </div>
      <div class="mask-box" v-show="type == 'cmembership3'">
        <div
          class="mask-content-main"
          style="text-align: center; white-space: nowrap; margin: 40px auto"
        >
          {{ "申请已提交，请您耐心等待平台回访" }}
        </div>
        <div
          class="mask-btn-wrap"
          style="display: flex; justify-content: center"
        >
          <div
            class="mask-btn mask-btn-top"
            @click.stop="operate()"
            style="width: 142px; background-color: #64b6a8; color: #fff"
          >
            确定
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
  
<script>
export default {
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    data2: {
      type: Object,
      default() {
        return {};
      },
    },
    imgList: {
      type: Array,
      default() {
        return [];
      },
    },
    autoShow: {
      type: Boolean,
      default: false,
    },
    autoType: {
      type: String,
      default: "",
    },
  },
  watch: {
    autoShow: {
      handler(newV, oldV) {
        this.showMask = newV;
      },
      immediate: true,
    },
    autoType: {
      handler(newV, oldV) {
        this.type = newV;
      },
      immediate: true,
    },
  },
  data() {
    return {
      item: {},
      showMask: false,
      type: "",

      mobanTitle: "",
      resumeLoading: false,
      mobanData: {},
    };
  },
  methods: {
    open(type, option) {
      this.type = type || "invite1";
      this.showMask = true;
    },
    close() {
      this.showMask = false;
    },
    operate() {
      if ("cmembership1" == this.type) {
        // 礼品送货通知
      }
      if ("cmembership2" == this.type) {
        // 礼品退货通知
      }
      if ("cmembership3" == this.type) {
        // 申请已提交，请您耐心等待平台回访
      }
      this.$emit("operate");
      //   this.close();
    },
  },
};
</script>
  
<style lang="less" scoped>
/deep/ .el-dialog {
  background: rgba(0, 0, 0, 0.2);

  .el-dialog__header {
    display: none;
  }

  .el-dialog__body {
    padding: 0;
  }
}

.mask-img2 {
  width: 80% !important;
  display: block;
  margin: 0 auto;
  height: auto !important;
  object-fit: cover;
  margin-bottom: 24px;
}

.mask {
  // position: relative;

  // background: rgba(0, 0, 0, 0.2);

  .mask-box1 {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
  }

  .mask-box {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
  }

  .mask-box3,
  .mask-box1,
  .mask-box {
    box-sizing: border-box;

    display: inline-block;
    padding: 0 24px;
    text-align: left;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    font-size: 24px;
    font-weight: 400;
    color: #333333;
    line-height: 34px;
    width: 432px;
    height: 184px;

    .mask-close {
      position: absolute;
      color: #999999;
      top: 10px;
      right: 10px;
      font-size: 26px;
      cursor: pointer;
    }

    .mask-content {
      font-size: 24px;
      font-weight: 400;
      color: #333333;
      line-height: 28px;
    }

    .mask-btn-wrap {
      .mask-btn {
        width: 284px;
        height: 50px;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid #64b6a8;
        margin: 0 auto;
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        color: #64b6a8;
        line-height: 50px;
        cursor: pointer;
      }
    }
  }

  .mask-box3 {
    width: 692px;
    // height: 1999px;

    position: relative;
    padding-bottom: 50px;
    margin-top: 13%;
    transform: translateX(-50%);
    left: 50%;
    margin-bottom: 50px;

    .mask-title3 {
      height: 39px;
      font-size: 28px;
      font-weight: 400;
      color: #333333;
      line-height: 39px;
      text-align: center;
      margin-bottom: 10px;
    }

    .mask-content3 {
      padding: 0 32px;

      min-height: 781px;
      opacity: 1;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .mask-btn-wrap3 {
      // margin-top: 26px;
      padding: 26px 0 50px;
      display: flex;
      justify-content: space-around;

      .mask-btn3 {
        width: 200px;
        height: 50px;
        background: #64b6a8;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        text-align: center;

        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        line-height: 50px;
        cursor: pointer;
      }
    }
  }
}
</style>
  